<template>
    <div class="app-container">
        <!-- 内容区 -->
        <div class="center">
          <div style="width:100%;height:10%;display: flex;align-items: center;padding-left: 10px;">
          <span style="text-align: right;
          vertical-align: middle;
          float: left;
          font-size: 14px;
          color: #606266;
          line-height: 40px;
          padding: 0 12px 0 0;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          font-weight: 900;">滤池选择：</span>
            <el-select  v-model="value" placeholder="选择" @change="handleChange">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </div>
            <!-- 上半部分 -->
            <div class="LCtop">
              <!-- 标题部分 -->
              <div class="LCtitle">
                <p class="LCtitleP" style="color:#295bb5;letter-spacing: 4px">滤池运行综合评价指标</p>
              </div>
              <!-- 图表部分 -->
              <div class="Topecharts" ref="myChart"></div>
            </div>

            <!-- 下半部分 -->
            <div class="LCbottom">
                <div class="lcjktz">
                  <div class="lcjktzTitle">
                    <p class="lcjktzP1">滤池健康体征</p>
                    <p class="lcjktzP2">{{lcjktz}}</p>
                  </div>
                  <div class="lcjktzBox">
                    <div>
                      <p class="lcjktzBox1">滤料使用年限（<el-button style="color: #3193d0;cursor: pointer;border:none;font-size:12px" @click="llsynxf()">查看</el-button>）</p>
                      <p class="lcjktzBox1">滤料跑失率（<el-button style="color: #3193d0;cursor: pointer;border:none;font-size:12px" @click="llpslf()">查看</el-button>）</p>
                      <p class="lcjktzBox1">滤头完好程度（<el-button style="color: #3193d0;cursor: pointer;border:none;font-size:12px" @click="ltwhcdf()">查看</el-button>）</p>
                      <p class="lcjktzBox1">处理水量负荷（<el-button style="color: #3193d0;cursor: pointer;border:none;font-size:12px" @click="clslfhf()">查看</el-button>）</p>
                      <p class="lcjktzBox1">设备保障水平（<el-button style="color: #3193d0;cursor: pointer;border:none;font-size:12px" @click="sbgzf()">查看</el-button>）</p>
                      <p class="lcjktzBox1">池壁藻类情况（<el-button style="color: #3193d0;cursor: pointer;border:none;font-size:12px" @click="bzfzf()">查看</el-button>）</p>
                    </div>
                    <div class="lcjktzBox2">
                      <p class="lcjktzBox2p">{{llsynx}}</p>
                      <p class="lcjktzBox2p">{{llpsl}}</p>
                      <p class="lcjktzBox2p">{{ltwhd}}</p>
                      <p class="lcjktzBox2p">{{clslfh}}</p>
                      <p class="lcjktzBox2p">{{sbbzsp}}</p>
                      <p class="lcjktzBox2p">{{cbzlfz}}</p>
                    </div>
                  </div>
                </div>
                <div class="glzbjs">
                  <div class="glzbjsTitle">
                    <p class="glzbjsP1">过滤指标监视</p>
                    <p class="glzbjsP2">{{glzbjs}}</p>
                  </div>

                  <div class="glzbjsBox">
                    <div>
                      <p class="glzbjsBox1">实时速率（<el-button style="color: #3193d0;cursor: pointer;border:none;font-size:12px" @click="lcssslf()">查看</el-button>）</p>
                      <p class="glzbjsBox1">浊度去除率（<el-button style="color: #3193d0;cursor: pointer;border:none;font-size:12px" @click="zdqclf()">查看</el-button>）</p>
                      <p class="glzbjsBox1">水头损失（<el-button style="color: #3193d0;cursor: pointer;border:none;font-size:12px" @click="lcstssf()">查看</el-button>）</p>
                      <p class="glzbjsBox1">砂面液体位监视（<el-button style="color: #3193d0;cursor: pointer;border:none;font-size:12px" @click="smytjsf()">查看</el-button>）</p>
                      <p class="glzbjsBox1">过滤时长（<el-button style="color: #3193d0;cursor: pointer;border:none;font-size:12px" @click="glscf()">查看</el-button>）</p>
                    </div>
                    <div>
                      <p class="glzbjsBox2">{{sssl}}m/h</p>
                      <p class="glzbjsBox2">{{zdqcl}}</p>
                      <p class="glzbjsBox2">{{stss}}</p>
                      <p class="glzbjsBox2">{{smytjs}}</p>
                      <p class="glzbjsBox2">{{glsc}}</p>
                    </div>
                  </div>
                </div>
                <div class="fxzbpc">
                  <div class="fxzbpcTitle">
                    <p class="fxzbpcP1">反洗指标评测</p>
                    <p class="fxzbpcP2">{{fxzbpc}}</p>
                  </div>

                  <div class="fxzbpcBox">
                    <div>
                      <p class="fxzbpcBox1">反洗能耗测评（<el-button style="color: #3193d0;cursor: pointer;border:none;font-size:12px" @click="lcfxnhf()">查看</el-button>）</p>
                      <p class="fxzbpcBox1">反洗水质测评（<el-button style="color: #3193d0;cursor: pointer;border:none;font-size:12px" @click="lcfxszf()">查看</el-button>）</p>
                      <p class="fxzbpcBox1">反洗滤层测评（<el-button style="color: #3193d0;cursor: pointer;border:none;font-size:12px" @click="fxlccpf()">查看</el-button>）</p>
                    </div>
                    <div>
                      <p class="fxzbpcBox2">{{fxnhcp}}</p>
                      <p class="fxzbpcBox2">{{fxszcp}}</p>
                      <p class="fxzbpcBox2">{{fxlccp}}</p>
                    </div>
                  </div>
                </div>
          </div>
          <!-- 滤料使用年限-->
          <el-dialog :title="title" :visible.sync="open" width="260px">
            <el-col :span="24" style="padding-left:0;padding-right:0;">
              <div class="box1">
                <div style="color: #75bfff;font-size: 32px;border:none">{{llsynx1}}年</div>
              </div>
            </el-col>
            <div slot="footer" class="dialog-footer">
              <el-button @click="open = false">关 闭</el-button>
            </div>
          </el-dialog>
          <!-- 滤头完好程度-->
          <el-dialog :title="title1" :visible.sync="open1" width="800px">
            <el-col :span="12" style="padding-left:0;padding-right:0;">
              <div class="box">
                <div class="content1">R滤格-水头损失：</div>
                <div class="content2" style="color: #75bfff;font-size:14px;">{{ltwhd1}}</div>
              </div>
            </el-col>
            <el-col :span="12" style="padding-left:0;padding-right:0;">
              <div class="box">
                <div class="content1">S滤格-水头损失：</div>
                <div class="content2" style="color: #75bfff;font-size: 14px;">{{ltwhd2}}</div>
              </div>
            </el-col>
            <el-col :span="12" style="padding-left:0;padding-right:0;">
              <div class="box">
                <div class="content1">T滤格-水头损失：</div>
                <div class="content2" style="color: #75bfff;font-size: 14px;">{{ltwhd3}}</div>
              </div>
            </el-col>
            <el-col :span="12" style="padding-left:0;padding-right:0;">
              <div class="box">
                <div class="content1">U滤格-水头损失：</div>
                <div class="content2" style="color: #75bfff;font-size: 14px;">{{ltwhd4}}</div>
              </div>
            </el-col>
            <el-col :span="12" style="padding-left:0;padding-right:0;">
              <div class="box">
                <div class="content1">V滤格-水头损失：</div>
                <div class="content2" style="color: #75bfff;font-size: 14px;">{{ltwhd5}}</div>
              </div>
            </el-col>
            <el-col :span="12" style="padding-left:0;padding-right:0;">
              <div class="box">
                <div class="content1">W滤格-水头损失：</div>
                <div class="content2" style="color: #75bfff;font-size: 14px;">{{ltwhd6}}</div>
              </div>
            </el-col>
            <el-col :span="12" style="padding-left:0;padding-right:0;">
              <div class="box">
                <div class="content1">X滤格-水头损失：</div>
                <div class="content2" style="color: #75bfff;font-size: 14px;">{{ltwhd7}}</div>
              </div>
            </el-col>
            <el-col :span="12" style="padding-left:0;padding-right:0;">
              <div class="box">
                <div class="content1">Y滤格-水头损失：</div>
                <div class="content2" style="color: #75bfff;font-size: 14px;">{{ltwhd8}}</div>
              </div>
            </el-col>
            <div slot="footer" class="dialog-footer">
              <el-button @click="open1 = false">关 闭</el-button>
            </div>
          </el-dialog>
          <!-- 处理水量负荷-->
          <el-dialog :title="title2" :visible.sync="open2" width="260px">
            <el-col :span="24" style="padding-left:0;padding-right:0;">
              <div class="box1">
                <div style="color: #75bfff;font-size: 32px;border:none">{{clslfh1}}</div>
              </div>
            </el-col>
            <div slot="footer" class="dialog-footer">
              <el-button @click="open2 = false">关 闭</el-button>
            </div>
          </el-dialog>
          <!-- 滤池设备总故障-->
          <el-dialog :title="title3" :visible.sync="open3" width="260px">
            <el-col :span="24" style="padding-left:0;padding-right:0;">
              <div class="box1">
                <div style="color: #75bfff;font-size: 32px;border:none">{{sbbzsp1}}</div>
              </div>
            </el-col>
            <div slot="footer" class="dialog-footer">
              <el-button @click="open3 = false">关 闭</el-button>
            </div>
          </el-dialog>
          <!-- 滤池实时总数率-->
          <el-dialog :title="title4" :visible.sync="open4" width="260px">
            <el-col :span="24" style="padding-left:0;padding-right:0;">
              <div class="box1">
                <div style="color: #75bfff;font-size: 32px;border:none">{{sssl1}}</div>
              </div>
            </el-col>
            <div slot="footer" class="dialog-footer">
              <el-button @click="open4 = false">关 闭</el-button>
            </div>
          </el-dialog>
          <!-- 滤池反洗总能耗-->
          <el-dialog :title="title5" :visible.sync="open5" width="260px">
            <el-col :span="24" style="padding-left:0;padding-right:0;">
              <div class="box1">
                <div style="color: #75bfff;font-size: 32px;border:none">{{fxnhcp1}}</div>
              </div>
            </el-col>
            <div slot="footer" class="dialog-footer">
              <el-button @click="open5 = false">关 闭</el-button>
            </div>
          </el-dialog>
          <!-- 滤池反洗总水质-->
          <el-dialog :title="title6" :visible.sync="open6" width="260px">
            <el-col :span="24" style="padding-left:0;padding-right:0;">
              <div class="box1">
                <div style="color: #75bfff;font-size: 32px;border:none">{{fxszcp1}}</div>
              </div>
            </el-col>
            <div slot="footer" class="dialog-footer">
              <el-button @click="open6 = false">关 闭</el-button>
            </div>
          </el-dialog>
          <!-- 水头损失-->
          <el-dialog :title="title7" :visible.sync="open7" width="800px">
            <el-col :span="12" style="padding-left:0;padding-right:0;">
              <div class="box">
                <div class="content1">R滤格-水头损失：</div>
                <div class="content2" style="color: #75bfff;font-size:14px;">{{stss1}}</div>
              </div>
            </el-col>
            <el-col :span="12" style="padding-left:0;padding-right:0;">
              <div class="box">
                <div class="content1">S滤格-水头损失：</div>
                <div class="content2" style="color: #75bfff;font-size: 14px;">{{stss2}}</div>
              </div>
            </el-col>
            <el-col :span="12" style="padding-left:0;padding-right:0;">
              <div class="box">
                <div class="content1">T滤格-水头损失：</div>
                <div class="content2" style="color: #75bfff;font-size: 14px;">{{stss3}}</div>
              </div>
            </el-col>
            <el-col :span="12" style="padding-left:0;padding-right:0;">
              <div class="box">
                <div class="content1">U滤格-水头损失：</div>
                <div class="content2" style="color: #75bfff;font-size: 14px;">{{stss4}}</div>
              </div>
            </el-col>
            <el-col :span="12" style="padding-left:0;padding-right:0;">
              <div class="box">
                <div class="content1">V滤格-水头损失：</div>
                <div class="content2" style="color: #75bfff;font-size: 14px;">{{stss5}}</div>
              </div>
            </el-col>
            <el-col :span="12" style="padding-left:0;padding-right:0;">
              <div class="box">
                <div class="content1">W滤格-水头损失：</div>
                <div class="content2" style="color: #75bfff;font-size: 14px;">{{stss6}}</div>
              </div>
            </el-col>
            <el-col :span="12" style="padding-left:0;padding-right:0;">
              <div class="box">
                <div class="content1">X滤格-水头损失：</div>
                <div class="content2" style="color: #75bfff;font-size: 14px;">{{stss7}}</div>
              </div>
            </el-col>
            <el-col :span="12" style="padding-left:0;padding-right:0;">
              <div class="box">
                <div class="content1">Y滤格-水头损失：</div>
                <div class="content2" style="color: #75bfff;font-size: 14px;">{{stss8}}</div>
              </div>
            </el-col>
            <div slot="footer" class="dialog-footer">
              <el-button @click="open7 = false">关 闭</el-button>
            </div>
          </el-dialog>
          <!-- 浊度去除率-->
          <el-dialog :title="title8" :visible.sync="open8" width="260px">
            <el-col :span="24" style="padding-left:0;padding-right:0;">
              <div class="box1">
                <div style="color: #75bfff;font-size: 32px;border:none">{{zdqcl1}}</div>
              </div>
            </el-col>
            <div slot="footer" class="dialog-footer">
              <el-button @click="open8 = false">关 闭</el-button>
            </div>
          </el-dialog>
          <!-- 滤料跑失-->
          <el-dialog :title="title9" :visible.sync="open9" width="260px">
            <el-col :span="24" style="padding-left:0;padding-right:0;">
              <div class="box1">
                <div style="color: #75bfff;font-size: 32px;border:none">{{llpsl1}}</div>
              </div>
            </el-col>
            <div slot="footer" class="dialog-footer">
              <el-button @click="open9 = false">关 闭</el-button>
            </div>
          </el-dialog>
          <!-- 池壁藻类-->
          <el-dialog :title="title10" :visible.sync="open10" width="260px">
            <el-col :span="24" style="padding-left:0;padding-right:0;">
              <div class="box1">
                <div style="color: #75bfff;font-size: 32px;border:none">{{cbzlfz1}}</div>
              </div>
            </el-col>
            <div slot="footer" class="dialog-footer">
              <el-button @click="open10= false">关 闭</el-button>
            </div>
          </el-dialog>
          <!-- 砂面液体位监视-->
          <el-dialog :title="title11" :visible.sync="open11" width="260px">
            <el-col :span="24" style="padding-left:0;padding-right:0;">
              <div class="box1">
                <div style="color: #75bfff;font-size: 32px;border:none">{{smytjs1}}</div>
              </div>
            </el-col>
            <div slot="footer" class="dialog-footer">
              <el-button @click="open11= false">关 闭</el-button>
            </div>
          </el-dialog>
          <!-- 过滤时长-->
          <el-dialog :title="title12" :visible.sync="open12" width="260px">
            <el-col :span="24" style="padding-left:0;padding-right:0;">
              <div class="box1">
                <div style="color: #75bfff;font-size: 32px;border:none">{{glsc1}}</div>
              </div>
            </el-col>
            <div slot="footer" class="dialog-footer">
              <el-button @click="open12= false">关 闭</el-button>
            </div>
          </el-dialog>
          <!-- 反洗滤层测评-->
          <el-dialog :title="title13" :visible.sync="open13" width="260px">
            <el-col :span="24" style="padding-left:0;padding-right:0;">
              <div class="box1">
                <div style="color: #75bfff;font-size: 32px;border:none">{{fxlccp1}}</div>
              </div>
            </el-col>
            <div slot="footer" class="dialog-footer">
              <el-button @click="open13= false">关 闭</el-button>
            </div>
          </el-dialog>
        </div>
    </div>
</template>
<script>
import * as echarts from 'echarts';
import {lczbinfoTask, zkcjshujTask} from "@/api/nssc/patroltask/patroltask";
import $ from "jquery";
let myChart1 = null;
export default {
    data(){
      return{
        ltwhd :  0,//滤头完好度
        llsynx: 0,//滤料使用年限
        sbbzsp : 0,//设备标准水平
        llpsl : 0,//滤料跑失率
        clslfh :0,//处理水量负荷
        cbzlfz:0,//赤壁藻类附着
        sssl:0,//实时速率
        stss : 0,//水头损失
        smytjs : 0,//砂面液体监视
        glsc : 0,//过滤时长
        zdqcl :0,//浊度去除率
        fxszcp :0,//反洗水质测评
        fxnhcp : 0,//反洗能耗测评
        fxlccp : 0,//反洗滤层测评
        lcjktz:0,//滤池健康体征
        glzbjs:0,//过滤指标监视
        fxzbpc:0,//反洗指标评测
        zpf:0,//总评分

        llsynx1:0,
        ltwhd1:0,
        ltwhd2:0,
        ltwhd3:0,
        ltwhd4:0,
        ltwhd5:0,
        ltwhd6:0,
        ltwhd7:0,
        ltwhd8:0,

        stss1:0,
        stss2:0,
        stss3:0,
        stss4:0,
        stss5:0,
        stss6:0,
        stss7:0,
        stss8:0,
        llpsl1:0,
        clslfh1:0,
        sbbzsp1:0,
        sssl1:0,
        fxnhcp1:0,
        fxszcp1:0,
        zdqcl1: 0,
        cbzlfz1:0,
        smytjs1:0,
        glsc1:0,
        fxlccp1:0,
        //是否显示弹出层
        open: false,
        title:"",
        open1: false,
        title1:"",
        open2: false,
        title2:"",
        open3: false,
        title3:"",
        open4: false,
        title4:"",
        open5: false,
        title5:"",
        open6: false,
        title6:"",
        open7: false,
        title7:"",
        open8: false,
        title8:"",
        open9: false,
        title9:"",
        open10: false,
        title10:"",
        open11: false,
        title11:"",
        open12: false,
        title12:"",
        open13: false,
        title13:"",
        options: [
          {
            value: '',
            label: '全部'
          },
          {
            value: '1',
            label: 'R滤格'
          },
          {
            value: '2',
            label: 'X滤格'
          },
          {
            value: '3',
            label: 'Y滤格'
          },
          {
            value: '4',
            label: 'Z滤格'
          },
          {
            value: '5',
            label: 'U滤格'
          },
          {
            value: '6',
            label: 'V滤格'
          },
          {
            value: '7',
            label: 'W滤格'
          },
          {
            value: '8',
            label: 'Y滤格'
          }
        ],
        value: '',
        queryParams: {
          pond_num:undefined,
        }
      }
    },
    created(){

    },
    mounted(){
      this.pjzbxx();//评价指标详细
    },
    beforeDestroy() {
      if(myChart1 != null){myChart1.clear();myChart1 = null;}
    },
    methods:{
      //滤料使用年限
      llsynxf() {
        this.open = true;
        this.title = "滤料使用年限值";
        zkcjshujTask(this.queryParams).then(response => {
          if(typeof response.data!="undefined" && response.data.lczbinfo!=null) {
            this.llsynx1 = response.data.lczbinfo.llsynx;//滤料使用年限
          }
        });
      },
      //滤头完好程度
      ltwhcdf() {
        this.open1 = true;
        this.title1 = "滤头完好程度值";
        zkcjshujTask(this.queryParams).then(response => {
          if(typeof response.data!="undefined" && response.data.lczbinfo!=null) {
            this.ltwhd1 = response.data.lczbinfo.ltwhd1;//滤头完好程度
            this.ltwhd2 = response.data.lczbinfo.ltwhd2;//滤头完好程度
            this.ltwhd3 = response.data.lczbinfo.ltwhd3;//滤头完好程度
            this.ltwhd4 = response.data.lczbinfo.ltwhd4;//滤头完好程度
            this.ltwhd5 = response.data.lczbinfo.ltwhd5;//滤头完好程度
            this.ltwhd6 = response.data.lczbinfo.ltwhd6;//滤头完好程度
            this.ltwhd7 = response.data.lczbinfo.ltwhd7;//滤头完好程度
            this.ltwhd8 = response.data.lczbinfo.ltwhd8;//滤头完好程度
          }
        });
      },
      //处理水量负荷
      clslfhf(){
        this.open2 = true;
        this.title2 = "处理水量总负荷值";
        zkcjshujTask(this.queryParams).then(response => {
          if(typeof response.data!="undefined" && response.data.lczbinfo!=null) {
            this.clslfh1 = response.data.lczbinfo.clslfh;//处理水量负荷
          }
        });
      },
      //设备故障
      sbgzf(){
        this.open3 = true;
        this.title3 = "滤池设备总故障值";
        zkcjshujTask(this.queryParams).then(response => {
          if(typeof response.data!="undefined" && response.data.lczbinfo!=null) {
            this.sbbzsp1 = response.data.lczbinfo.sbbzsp;//滤池设备总故障
          }
        });
      },
      //滤池实时速率
      lcssslf(){
        this.open4 = true;
        this.title4 = "滤池实时总速率值";
        zkcjshujTask(this.queryParams).then(response => {
          if(typeof response.data!="undefined" && response.data.lczbinfo!=null) {
            this.sssl1 = response.data.lczbinfo.sssl;//滤池实时总速率
          }
        });
      },
      //滤池反洗总能耗
      lcfxnhf(){
        this.open5 = true;
        this.title5 = "滤池反洗总能耗值";
        zkcjshujTask(this.queryParams).then(response => {
          if(typeof response.data!="undefined" && response.data.lczbinfo!=null) {
            this.fxnhcp1 = response.data.lczbinfo.fxnhcp;//滤池反洗总能耗
          }
        });
      },
      //滤池反洗总水质
      lcfxszf(){
        this.open6 = true;
        this.title6 = "滤池反洗总水质值";
        zkcjshujTask(this.queryParams).then(response => {
          if(typeof response.data!="undefined" && response.data.lczbinfo!=null) {
            this.fxszcp1 = response.data.lczbinfo.fxszcp;//滤池反洗总水质
          }
        });
      },
      //滤池水头损失
      lcstssf() {
        this.open7 = true;
        this.title7 = "滤池水头损失值";
        zkcjshujTask(this.queryParams).then(response => {
          if(typeof response.data!="undefined" && response.data.lczbinfo!=null) {
            this.stss1 = response.data.lczbinfo.stss1;//滤头完好程度
            this.stss2 = response.data.lczbinfo.stss2;//滤头完好程度
            this.stss3 = response.data.lczbinfo.stss3;//滤头完好程度
            this.stss4 = response.data.lczbinfo.stss4;//滤头完好程度
            this.stss5 = response.data.lczbinfo.stss5;//滤头完好程度
            this.stss6 = response.data.lczbinfo.stss6;//滤头完好程度
            this.stss7 = response.data.lczbinfo.stss7;//滤头完好程度
            this.stss8 = response.data.lczbinfo.stss8;//滤头完好程度
          }
        });
      },
      //浊度去除率
      zdqclf(){
        this.open8 = true;
        this.title8 = "浊度去除率值";
        zkcjshujTask(this.queryParams).then(response => {
          if(typeof response.data!="undefined" && response.data.lczbinfo!=null) {
            this.zdqcl1 = response.data.lczbinfo.zdqcl;//浊度去除率
          }
        });
      },
      //滤料跑失率
      llpslf() {
        this.open9 = true;
        this.title9 = "滤料跑失值";
        zkcjshujTask(this.queryParams).then(response => {
          if(typeof response.data!="undefined" && response.data.lczbinfo!=null) {
            this.llpsl1 = response.data.lczbinfo.llpsl;//滤料跑失率
          }
        });
      },
      //池壁藻类
      bzfzf(){
        this.open10 = true;
        this.title10 = "池壁藻类值";
        zkcjshujTask(this.queryParams).then(response => {
          if(typeof response.data!="undefined" && response.data.lczbinfo!=null) {
            this.cbzlfz1 = response.data.lczbinfo.cbzlfz;//池壁藻类
          }
        });
      },
      //砂面液体位监视
      smytjsf(){
        this.open11 = true;
        this.title11 = "砂面液位监视值";
        zkcjshujTask(this.queryParams).then(response => {
          if(typeof response.data!="undefined" && response.data.lczbinfo!=null) {
            this.smytjs1 = response.data.lczbinfo.smytjs;//砂面液体位监视
          }
        });
      },
      //过滤时长
      glscf(){
        this.open12 = true;
        this.title12 = "过滤时长值";
        zkcjshujTask(this.queryParams).then(response => {
          if(typeof response.data!="undefined" && response.data.lczbinfo!=null) {
            this.glsc1 = response.data.lczbinfo.glsc;//过滤时长
          }
        });
      },
      //反洗滤层测评值
      fxlccpf(){
        this.open13 = true;
        this.title13 = "反洗滤层测评值";
        zkcjshujTask(this.queryParams).then(response => {
          if(typeof response.data!="undefined" && response.data.lczbinfo!=null) {
            this.fxlccp1 = response.data.lczbinfo.fxlccp;//反洗滤层测评值
          }
        });
      },
      handleChange(value){
        this.queryParams.pond_num=value;
        this.pjzbxx();
      },
      pjzbxx() {
         lczbinfoTask(this.queryParams).then(response => {
            //滤池评价详情
            if(typeof response.data!="undefined" && response.data.lczb!=null) {
              this.ltwhd = response.data.lczb.ltwhd;//滤头完好度
              this.llsynx = response.data.lczb.llsynx;//滤料使用年限
              this.sbbzsp = response.data.lczb.sbbzsp;//设备保障水平
              this.llpsl = response.data.lczb.llpsl;//滤料跑失率
              this.clslfh =response.data.lczb.clslfh;//处理水量负荷
              this.cbzlfz=response.data.lczb.cbzlfz;//赤壁藻类附着
              this.sssl=response.data.lczb.sssl;//实时速率
              this.stss = response.data.lczb.stss;//水头损失
              this.smytjs = response.data.lczb.smytjs;//砂面液体监视
              this.glsc =response.data.lczb.glsc;//过滤时长
              this.zdqcl =response.data.lczb.zdqcl;//浊度去除率
              this.fxszcp = response.data.lczb.fxszcp;//反洗水质测评
              this.fxnhcp =response.data.lczb.fxnhcp;//反洗能耗测评
              this.fxlccp = response.data.lczb.fxlccp;//反洗滤层测评
              this.lcjktz=response.data.lczb.lcjktz>0?response.data.lczb.lcjktz.toFixed(2):0;//滤池健康体征
              this.glzbjs=response.data.lczb.glzbjs>0?response.data.lczb.glzbjs.toFixed(2):0;//过滤指标监视
              this.fxzbpc=response.data.lczb.fxzbpc>0?response.data.lczb.fxzbpc.toFixed(2):0;//反洗指标评测
              this.zpf = parseFloat(this.lcjktz)+parseFloat(this.glzbjs)+parseFloat(this.fxzbpc);
           }
           this.echarts1(this.lcjktz,this.glzbjs,this.fxzbpc,this.zpf);//反洗指标测评
         });
      },
      //总评分
      echarts1(lcjktz,glzbjs,fxzbpc,zpf){
        let option;
          option = {
              title: [
                  {
                      zlevel: 55,
                      text: zpf.toFixed(2),
                      top: '38.5%',
                      textAlign: "center",
                      left: "30%",
                      textStyle: {
                          color: '#558DFF',
                          fontFamily: 'TenSans-Bold',
                          fontSize: 24,
                          fontWeight: '600'
                      }
                  },{
                      zlevel: 55,
                      text: '总评分',
                      top: '55%',
                      textAlign: "center",
                      left: "30%",
                      textStyle: {
                          color: '#558DFF',
                          fontSize: 18,
                          fontWeight: '500'
                      }
                  }
              ],
              tooltip: {
                  trigger: 'none',
                  confine: false,
              },
              legend: {
                  show: true,
                  orient: 'vertical',
                  icon: 'rect',
                  x: '70%',
                  y: '20%',
                  itemWidth: 15,
                  itemHeight: 15,
                  itemGap: 20,
                  formatter: '{name}',
                  align: 'left',
                  textStyle:{
                    color:'#FFFFFF'
                  }
              },
              series: [
                  {
                      center: ['30%', '50%'],
                      //name: '1111',
                      type: 'pie',
                      radius: ['40%', '70%'],
                      // avoidLabelOverlap: false,
                      label: {
                          show: true,
                          formatter: function (params) {
                              // 假设此轴的 type 为 'time'。
                              return params.name + params.value;
                          }
                      },
                      labelLine: {
                          show: true
                      },
                      data: [

                          {
                              value: fxzbpc,
                              name: '反冲洗指标',
                            label: {
                              fontSize: 14
                            },
                              itemStyle: {
                                  color: '#D1A12E'
                              }
                          },

                          {
                              value: lcjktz,
                              name: '滤池健康体征指标',
                            label: {
                              fontSize: 14
                            },
                              itemStyle: {
                                  color: '#87CE58 ',
                              }
                          },
                          {
                              value: glzbjs,
                              name: '过滤指标监视',
                            label: {
                              fontSize: 14
                            },
                              itemStyle: {
                                  color: '#5AA4FF'
                              }
                          },
                          {
                              value: 2,
                              //name: '',
                              itemStyle: {
                                  color: '#ececec'
                              },
                              label: {
                                  show: false,
                              },
                              labelLine: {
                                  show: false
                              },
                          },
                      ],
                  },
              ]
          }
        //通过$ref进行挂载
        myChart1 = echarts.init(this.$refs.myChart);
        myChart1.setOption(option);
        window.addEventListener("resize", () => {
          if(myChart1!=null)myChart1.resize();
        });//同比缩放
      }
    }
}
</script>

<style lang="scss" scoped>
*{
  margin: 0;
  padding: 0;
}
  .app-container{
    width: 100%;
    height: calc(100vh - 40px);
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: #011137 !important;
  }
  .center{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .LCtop{
    width: 95%;
    height: 40%;
    background:#081846;
    border-radius: 10px;
    margin-top: 34.5px;
    display: flex;
    //标题部分
    .LCtitle{
      width: 40%;
      height: 100%;
      font-family: Source Han Sans CN;
      font-weight: bold;
      font-size: 31px;
      color: #FFFFFF;
      display: flex;
      justify-content: center;
      align-items: center;
      .LCtitleP{
        margin-left: 13.5px;
      }
    }
    //图表部分
    .Topecharts{
      width: 60%;
      height: 100%;
      //background: darkkhaki;
    }
  }

  .LCbottom{
    width: 95%;
    height: 55%;
    //background-color: aquamarine;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 29.5px;
    .lcjktz{
      width: 31%;
      height: 100%;
      border-right: dashed 1px #081a4a;
      //background-image: url(../images/lcjktz.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      .lcjktzTitle{
        display: flex;
        justify-content: space-between;
        .lcjktzP1{
          font-family: Source Han Sans CN;
          font-weight: bold;
          font-size: 18px;
          color: #4873c1;
          margin-top: 20px;
          margin-left: 16px;
        }
        .lcjktzP2{
          font-family: TenSans;
          font-weight: bold;
          font-size: 24px;
          color: #397314;
          margin-right: 18.5px;
          margin-top: 18px;
        }
      }
      .lcjktzBox{
        margin-top: 29.5px;
        display: flex;
        justify-content: space-between;
        font-family: Source Han Sans CN;
        font-weight: 500;
        font-size: 10px;
        color: #C4D8FA;
        .lcjktzBox1{
          color: #8fa2cc;
          width: 144px;
          height: 18px;
          font-size:13px;
          margin-left: 16px;
          margin-bottom: 16px;
        }
        .lcjktzBox2p {
          color: #5dcbff;
          width: 90px;
          height: 18px;
          margin-right: 26px;
          margin-bottom: 16px;
          font-size:13px;
          display: flex;
          flex-direction: column;
          // justify-content: flex-end;
          align-items: flex-end;
        }

      }
    }
    .glzbjs{
      width: 31%;
      height: 100%;
      border-right: dashed 1px #081a4a;
    //  background-image: url(../images/glzbjs.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      .glzbjsTitle{
        display: flex;
        justify-content: space-between;
        .glzbjsP1{
          font-family: Source Han Sans CN;
          font-weight: bold;
          font-size: 18px;
          color: #4873c1;
          margin-top: 20px;
          margin-left: 16px;
        }
        .glzbjsP2{
          font-family: TenSans;
          font-weight: bold;
          font-size: 24px;
          color: #105896;
          margin-right: 18.5px;
          margin-top: 18px;
        }
      }
      .glzbjsBox{
        margin-top: 29.5px;
        display: flex;
        justify-content: space-between;
        font-family: Source Han Sans CN;
        font-weight: 500;
        font-size: 10px;
        color: #C4D8FA;
        .glzbjsBox1{
          color: #8fa2cc;
          width: 145px;
          height: 18px;
          font-size: 13px;
          margin-left: 16px;
          margin-bottom: 16px;
        }
        .glzbjsBox2{
          color: #5dcbff;
          width: 90px;
          height: 18px;
          margin-right: 26px;
          font-size: 13px;
          margin-bottom: 16px;
          display: flex;
          flex-direction: column;
          // justify-content: flex-end;
          align-items: flex-end;
        }
      }
    }
    .fxzbpc{
      width: 31%;
      height: 100%;
      border-right: dashed 1px #081a4a;
     // background-image: url(../images/fxzbpc.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      .fxzbpcTitle{
        display: flex;
        justify-content: space-between;
        .fxzbpcP1{
          font-family: Source Han Sans CN;
          font-weight: bold;
          font-size: 18px;
          color: #4873c1;
          margin-top: 20px;
          margin-left: 16px;
        }
        .fxzbpcP2{
          font-family: TenSans;
          font-weight: bold;
          font-size: 24px;
          color: #735a13;
          margin-right: 18.5px;
          margin-top: 18px;
        }
      }
      .fxzbpcBox{
        margin-top: 29.5px;
        display: flex;
        justify-content: space-between;
        font-family: Source Han Sans CN;
        font-weight: 500;
        font-size: 10px;
        color: #C4D8FA;
        .fxzbpcBox1{
          color: #8fa2cc;
          width: 132px;
          height: 18px;
          font-size: 13px;
          margin-left: 16px;
          margin-bottom: 16px;
        }
        .fxzbpcBox2{
          color: #5dcbff;
          width: 90px;
          font-size: 13px;
          height: 18px;
          margin-right: 26px;
          margin-bottom: 16px;
          display: flex;
          flex-direction: column;
          // justify-content: flex-end;
          align-items: flex-end;
        }
      }
    }
  }
.box {
  width: 100%;
  height: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-left: 1px solid #2B5B9B;
  border-top: 1px solid #2B5B9B;
  .content1 {
    width: 50%;
    height: 35px;
    line-height: 35px;
    text-align: center;
    background-color: #07164B;
    border-right: 1px solid #2B5B9B;
    border-bottom: 1px solid #2B5B9B;
    border-top: 1px solid #2B5B9B;
    font-size: 12px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #D7D7D7;
  }
  .content2 {
    width: 50%;
    height: 35px;
    line-height: 35px;
    text-align: center;
    background: #0E2356;
    border-right: 1px solid #2B5B9B;
    border-bottom: 1px solid #2B5B9B;
    border-top: 1px solid #2B5B9B;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #D7D7D7;
    font-size: 12px;
  }
}

.box1 {
  width: 100%;
  height: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

